<!-- 轮播图管理/景点信息管理-列表展示图 -->
<template>
  <div>
    <el-upload v-loading="loading" :class="{ showUpLoad: fileList.length == limit }" ref="upload" action="#"
      list-type="picture-card" :file-list="fileList" :on-change="onChange" :on-remove="onRemove" :limit="limit"
      :accept="accept" :on-exceed="onExceed" :auto-upload="false">
      <template>
        <i class="el-icon-plus" />
      </template>
      <div slot="tip" class="el-upload__tip">请上传jpg,jpeg,png类型的文件</div>
    </el-upload>
  </div>
</template>

<script>
import DocumentApi from "@/api/tourism/document"; // 文件上传/下载
import Api from "@/utils/tool/api"; // 文件相关
export default {
  name: "UploadListImg",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    accept: {
      type: String,
      default: "image/*",
    },
    limit: {
      type: Number,
      default: 9,
    },
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    // 负责回显的数组
    fileList: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    onChange(file, fileList) {
      this.loading = true;
      const dataForm = new FormData();
      dataForm.append("file", file.raw);
      dataForm.append("moduleType", "CULTURETOURISM");
      dataForm.append("upDownType", 'FTP');
      const isLt10M = file.size / 1024 / 1024 < 10;
      console.log('file.raw.type', file.raw.type);
      // console.log('file', file);
      if (file.raw.type == "image/jpeg" || file.raw.type == "image/png" || file.raw.type == "image/jpg") {
        if (!isLt10M) {
          this.loading = false;
          this.$message.error('上传大小不能超过 10MB!');
          fileList.splice(-1, 1)
          return false
        } else {
          console.log(DocumentApi)
          DocumentApi.getUploadUrl(dataForm)
            .then((res) => {
              this.loading = false;
              console.log("**********", res);
              this.fileList.push({
                url: `${Api.requestURL}${res.data}&fileType=${file.raw.type}`,
              });
              console.log(this.fileList)
              this.$emit("input", this.fileList);    // 传递给父组件 fileIdList 图片回显
              this.$emit("addFileListId", res.data); // 传递给父组件 fileIdList 图片数据
              this.$message.success("上传成功！");
              this.$emit('resetImg')
            })
            .catch(() => {
              this.loading = false;
              fileList.splice(-1, 1)
              this.$message.error("上传失败！");
            });
        }
      } else {
        this.loading = false;
        this.$message.error('请上传jpg,jpeg,png类型的文件');
        fileList.splice(-1, 1)
        return
      }
    },
    onRemove(file) {
      this.fileList.splice(this.fileList.findIndex((i) => i.url === file.url), 1);
      console.log("this.fileList", this.fileList);
      this.$emit("input", this.fileList);
      this.$emit("delectFileId", file);
    },
    // 文件超出个数限制时
    onExceed(file) {
      this.$message.info(`最多上传${this.limit}张`);
    },
    // 清空
    clearFiles() {
      this.$refs.upload.clearFiles();
    },
  },
};
</script>

<style scoped lang="scss">
/* 隐藏el-upload */
.showUpLoad {
  ::v-deep .el-upload {
    display: none;
  }
}
</style>
